<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div ref="chartContainer" class="chart"></div>
  </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      chart: null,
      powerData: [],
      timer: null,
      flag: true,
      i: 0,
      datas: [
        {dateNum: '20250101', data: 100}, {dateNum: '20250102', data: 200},{dateNum: '20250103', data: 300},{dateNum: '20250104', data: 400},{dateNum: '20250105', data: 500},{dateNum: '20250106', data: 600},{dateNum: '20250107', data: 700},{dateNum: '20250108', data: 800},{dateNum: '20250109', data: 900},{dateNum: '20250110', data: 1000},
        {dateNum: '20250111', data: 100}, {dateNum: '20250112', data: 200},{dateNum: '20250113', data: 300},{dateNum: '20250114', data: 400},{dateNum: '20250115', data: 500},{dateNum: '20250116', data: 600},{dateNum: '20250117', data: 700},{dateNum: '20250118', data: 800},{dateNum: '20250119', data: 900},{dateNum: '20250120', data: 1000},
        {dateNum: '20250121', data: 100}, {dateNum: '20250122', data: 200},{dateNum: '20250123', data: 300},{dateNum: '20250124', data: 400},
      ],
      interval: 1000000000000,
      dates: 1
    }
  },
   mounted() {
    this.flag = true
    this.powerData = []
    this.initChart()
   this.fetchPowerData('AH1_IPA')
    
    // Update chart every 5 minutes
    this.timer = setInterval(() => {
      this.flag = false
      this.i++
      this.dates++
      this.fetchPowerData('AH1_IPA')
      // console.log(this.powerData)
    }, 300000)
    this.resizeHandler = () => {
      this.adjustChartSize(); // Call adjustChartSize on resize
    };
    window.addEventListener('resize', this.resizeHandler);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    isMobile() {
      // Basic check using userAgent or window width
      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        return true;
      }
      // You can also check window width as a fallback or primary method
      // return window.innerWidth <= 768; 
      return false; // Default to desktop
    },
    adjustChartSize() {
      if (!this.$refs.chartContainer) return;
      const container = this.$refs.chartContainer;
      if (this.isMobile()) {
        // Set width for mobile (e.g., 100% of viewport width minus padding)
        container.style.width = 'calc(100vw - 40px)'; // Adjust 40px based on parent padding
        container.style.height = '300px'; // Adjust height for mobile if needed
        console.log('手机浏览器');
        this.interval = 3
      } else {
        // Set width for desktop (e.g., 100% of container)
        container.style.width = '100%'; 
        container.style.height = '500px'; // Original desktop height
        console.log('电脑浏览器');
        this.interval = 0
      }
      // Resize the ECharts instance
      if (this.chart) {
        this.chart.resize();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      this.adjustChartSize(); // Call adjustChartSize on init
      this.updateChart([])
    },
    fetchPowerData(name) {
      axios.get(`http://192.168.5.111:3000/api/users/${name}`)
        .then(response => {
          console.log(response.data);
          
          if(this.flag ===true) {
            this.powerData = response.data
            this.updateChart(this.powerData)
          }else {
            this.powerData.shift()
            this.powerData.push(response.data[response.data.length - 1])
            console.log(response.data[response.data.length - 1])
            this.updateChart(this.powerData)
          }
        })
        .catch(error => {
          console.error('Error fetching power data:', error)
        })
    },
    updateChart(data) {
      // const concat = item => item.('CONCAT(RIGHT(date,6),CAST(hourF AS CHAR)'))
       const times = data.map(item => item.date) || []
       const values = data.map(item => (item.DATA).toFixed(2)) || []
      // const times = this.datas.map(item => item.dateNum) || []
      // const values = this.datas.map(item => item.data) || []
      const option = {
        title: {
          text: '24小时电力统计',
          textAlign: 'left',
          left: '70px',
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br />{a}: {c} kWh'
        },
        xAxis: {
          type: 'category',
          data: times,
          boundaryGap: false,
          axisLabel: {
            interval: 500,
            rotate: 45
          }
        },
        yAxis: {
          max: 220,
          type: 'value',
          name: '电力 (kWh)',
          interval: 40,
        },
        series: [{
          name: '电力用量',
          type: 'line',
          smooth: true,
          symbol: 'none',
          data: values,
          markLine: {
            data: [
              { 
                yAxis: 202.1, 
                name: '阈值A', 
                lineStyle: { color: '#629fd7', type: 'solid' },
                label:{
                  show: true,   // 显示标签
                  position: 'middle', // 标签位置：'start'、'middle'、'end'
                  formatter: '额定电流: 202.1A' // {c} 自动替换为 yAxis 值
                }
              },
              // { 
              //   yAxis: 110.45, 
              //   name: '阈值B', 
              //   lineStyle: { color: '#00b050', type: 'solid' },
              //   label:{
              //     show: true,   // 显示标签
              //     position: 'end', // 标签位置：'start'、'middle'、'end'
              //     formatter: '安全电流: {c}' // {c} 自动替换为 yAxis 值
              //   }
              // },
              // { 
              //   type: 'max', 
              //   name: '最大值', 
              //   lineStyle: { color: '#ed7d31',type: 'solid' },
              //   label:{
              //     show: true,   // 显示标签
              //     position: 'end', // 标签位置：'start'、'middle'、'end'
              //     formatter: '极限电流: {c}' // {c} 自动替换为 yAxis 值
              //   }
              // },
              // {
              //   type: 'average',
              //   name: '平均电流',
              //   lineStyle: {color:'#a6a6a6', type: 'solid'},
              //   label:{
              //     show: true,
              //     position: 'end',
              //     formatter: 'A项平均电流: {c}'
              //   }
              // }
            ]
          }
        }],
        // dataZoom: [{
        //     type: 'slider',
        //     show: false,
        //     start: 0,
        //     end: 70,
        //     bottom: 10,
        //     zoomLock: false,
        //     realtime: true
        //   }, 
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 100,
        //     zoomLock: false,
        //     filterMode: 'filter'
        //   }],
        grid: {
          bottom: 70
        }
      }
      
      this.chart.setOption(option)
      // let currentStart = 70
      // let currentEnd = 100
      // this.timer = setInterval(() => {
      //       // 每次向右移动 1%
      //       currentStart += 1;
      //       currentEnd += 1;

      //       // 如果超过 100%，重置到右侧（模拟连续数据）
      //       if (currentEnd > 100) {
      //           currentStart = 0;
      //           currentEnd = 70;
      //       }

      //       // 更新 dataZoom 配置
      //       this.chart.setOption({
      //           dataZoom: [{
      //               start: currentStart,
      //               end: currentEnd
      //           }]
      //       });
      //   }, 3000)
      // Handle window resize
      window.addEventListener('resize', () => {
        this.chart && this.chart.resize()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart {
  width: 100vw;
  height: 80vh;
}
</style>
